<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的页面</title>
		<link rel="stylesheet" href="css/wode.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<script type="text/javascript">
			function ShowElement(element) {
				var oldhtml = element.innerHTML;
				//创建新的input元素
				var newobj = document.createElement('input');
				//为新增元素添加类型
				newobj.type = 'text';
				//为新增元素添加value值
				newobj.value = oldhtml;
				//为新增元素添加光标离开事件
				newobj.onblur = function() {
					//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 
					element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
					//当触发时设置父节点的双击事件为ShowElement
					element.setAttribute("ondblclick", "ShowElement(this);");
				}
				//设置该标签的子节点为空
				element.innerHTML = '';
				//添加该标签的子节点，input对象
				element.appendChild(newobj);
				//设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
				newobj.setSelectionRange(0, oldhtml.length);
				//设置获得光标
				newobj.focus();

				//设置父节点的双击事件为空
				newobj.parentNode.setAttribute("ondblclick", "");

			}
		</script>
	</head>

	<body style="margin: 0px;">

		<p id="wode-p1">海之言</p><img src="img/wode-竖.png" id="wode-img1" />
		<input type="text" id="wode-input1" />
		<img src="img/wode-搜索.png" id="wode-img2" />

		<div id="wode-div1">
			<img src="img/wode-头像.png" id="wode-img4" />
			<div id="wode-div2">
				<p id="wode-p2">ID:262538387</p>
				<p id="wode-p3">蓝精灵</p>
				<img src="img/wode-女性.png" id="wode-img5" />
				<img src="img/wode-男性.png" id="wode-img6" />
				<p id="wode-p4">保密</p>
			</div>
			<div id="wode-div3">
				<img src="img/wode-时钟.png" id="wode-img7" />
				<a id="wode-p5"href="zhuce.html">注册</a>
				<div id="wode-div4">
					<a href="denglu.html" id="wode-a1">登录</a>
					<div id="wode-p6">可获取大量曝光</div>
				</div>
			</div>
			<img src="img/wode-轮船.png" id="wode-img3" />
		</div>
		<div id="wode-div5">
			<ul>
				<li><img src="img/wode-个人中心.png">个人中心</li>
				<li><img src="img/wode-我的小班.png">我的小班</li>
				<li><img src="img/wode-我的收藏.png">我的收藏</li>
				<li><img src="img/wode-我的下载.png">我的下载</li>
				<li><img src="img/wode-个人设置.png">个人设置</li>
				<li><img src="img/wode-消息中心.png">消息中心</li>

			</ul>

		</div>

		<div id="wode-div6">
			<div>
				<table id="wode-table" style="border: 1px solid;border-collapse: collapse;">
					<tr>
						<td>个人信息</td>
						<td><span>林云</span><button onclick="edit(this)" style="float: right;">编辑</button></td>
					</tr>

					<tr>

						<td>头像</td>
						<td><span>暂无</span><button onclick="edit(this)" style="float: right;">编辑</button></td>

					</tr>
					<tr>

						<td>手机号</td>
						<td><span>189****1216</span><button onclick="edit(this)" style="float: right;">编辑</button></td>

					</tr>
					<tr>

						<td>邮箱</td>
						<td><span>1125****65@qq.com</span><button onclick="edit(this)" style="float: right;">编辑</button></td>

					</tr>
					<tr>

						<td>社交账号</td>
						<td><span>暂无</span><button onclick="edit(this)" style="float: right;">编辑</button></td>

					</tr>
				</table>

			</div>

			<script>
				/*点击编辑即可要修改的内容*/
				function edit(element) {

					element.innerHTML = "保存";

					var prev = element.previousSibling;

					var oldhtml = prev.innerHTML;

					prev.innerHTML = "";

					var newObj = document.createElement("textarea");

					newObj.className = "textArea";

					newObj.innerHTML = oldhtml;

					prev.appendChild(newObj);

					newObj.focus();

					newObj.onblur = function() {

						alert(prev.id);

						element.innerHTML = "编辑";

						prev.innerHTML = this.value ? this.value : oldhtml;

					}

				}
			</script>

		</div>

		<div id="wode-div7">

		</div>
		<footer>
			<div class="footer-bg">
				<p>版权声明</p>
			</div>
		</footer>
	</body>

</html>